<template>
  <div class="page-container">
    <div class="form-container">
      <el-form :inline="true" label-width="80px" :size="'small'" ref="form">
        <el-row>
          <el-col :span="6">
            <el-form-item label="委托单位">
              <el-select v-model="state.query.entId" placeholder="请输入后搜索" style="width: 100%" clearable filterable remote
                :remote-method="getBusDetail" :loading="state.settlementLoading">
                <el-option v-for="item in state.settlementList" :key="item.value" :label="item.label" :value="item.value">
                  <span style="float: left">{{ item.label }}</span>
                  <span style="float: right">{{ item.entFullname }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收付类别">
              <el-select v-model="state.query.entId" placeholder="请选择" style="width: 100%" clearable filterable>
                <el-option :label="1" :value="1" />
                <el-option :label="2" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="币种">
              <el-select v-model="state.query.currency" placeholder="请选择币种" style="width: 100%" clearable filterable
                remote :remote-method="getCurrentData" :loading="state.currentLoading">
                <el-option v-for="item in state.current" :key="item.value" :label="item.label" :value="item.value">
                  <span style="float: left"> {{ item.label }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单票锁定">
              <el-checkbox v-model="state.query.lock" label="" size="large" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="对账日期">
              <el-date-picker v-model="sailTime" type="daterange" range-separator="~" start-placeholder="开始日期"
                end-placeholder="结束日期" style="width: 100%" size="small" value-format="YYYY-MM-DD" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开票日期">
              <el-date-picker v-model="invoiceDateTime" type="daterange" range-separator="~" start-placeholder="开始日期"
                end-placeholder="结束日期" size="small" style="width: 100%" clearable value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="销账日期">
              <el-date-picker v-model="recDateTime" type="daterange" range-separator="~" start-placeholder="开始日期"
                end-placeholder="结束日期" size="small" style="width: 100%" clearable value-format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="销账标记">
              <el-select v-model="state.query.currency" placeholder="请选择" style="width: 100%" clearable filterable remote
                :remote-method="getCurrentData" :loading="state.currentLoading">
                <el-option v-for="item in state.current" :key="item.value" :label="item.label" :value="item.value">
                  <span style="float: left"> {{ item.label }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-collapse-transition>
          <div v-show="state.hidden">
            <el-row>
              <el-col :span="6">
                <el-form-item label="开航日期">
                  <el-date-picker v-model="sailTime" type="daterange" range-separator="~" start-placeholder="开始日期"
                    end-placeholder="结束日期" style="width: 100%" size="small" value-format="YYYY-MM-DD" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="船名">
                  <el-select v-model="state.query.currency" placeholder="请输入后搜索" style="width: 100%" clearable filterable
                    remote :remote-method="getCurrentData" :loading="currentLoading">
                    <el-option v-for="item in state.current" :key="item.value" :label="item.label" :value="item.value">
                      <span style="float: left"> {{ item.label }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <!-- <el-form-item label="费用类型">
    <el-select v-model="state.query.FeeCode" placeholder="请选择费用类型" style="width: 100%" clearable filterable remote
      :remote-method="getFeeType" :loading="state.feenameLoading">
      <el-option v-for="item in state.feenameList" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </el-form-item> -->
                <el-form-item label="航次">
                  <el-select v-model="state.query.currency" placeholder="请输入后搜索" style="width: 100%" clearable filterable
                    remote :remote-method="getCurrentData" :loading="state.currentLoading">
                    <el-option v-for="item in state.current" :key="item.value" :label="item.label" :value="item.value">
                      <span style="float: left"> {{ item.label }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <!-- <el-form-item label="箱封号">
    <el-input v-model="state.query.CtnNo" size="small" placeholder="请输入">
    </el-input>
  </el-form-item> -->
                <el-form-item label="退关状态">
                  <el-checkbox v-model="state.query.outState" label="" size="large" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <!-- <el-form-item label="业务员">
              <el-select v-model="state.query.saleId" placeholder="请选择业务员" style="width: 100%" clearable filterable remote
                :remote-method="getSalesman" :loading="state.salesmanLoading">
                <el-option v-for="item in state.salesman" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item> -->
                <el-form-item label="提单号">
                  <el-input v-model="state.query.blNo" clearable placeholder="请输入" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <!-- <el-form-item label="收/付">
              <el-select v-model="state.query.isIncome" placeholder=" " style="width: 100%" filterable>
                <el-option label="全部" :value="''"> </el-option>
                <el-option label="收" :value="1"> </el-option>
                <el-option label="付" :value="0"> </el-option>
              </el-select>
            </el-form-item> -->
                <el-form-item label="账单编号">
                  <el-input v-model="state.query.blNo" clearable placeholder="请输入" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="发票号码">
                  <el-input v-model="state.query.invoice" clearable placeholder="请输入" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="费用状态">
                  <el-select v-model="state.query" placeholder="请选择" style="width: 100%" filterable>
                    <el-option v-for="item in state.aduitStatus" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <!-- <el-form-item label="对账单号">
              <el-input v-model="state.query.balanceNo" clearable placeholder="请输入" style="width: 100%" />
            </el-form-item> -->
                <el-form-item label="业务人员">
                  <el-select v-model="state.query" placeholder="请选择" style="width: 100%" filterable>
                    <el-option v-for="item in state.aduitStatus" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <!-- <el-form-item label="开票状态">
              <el-select v-model="state.query.invoiceStatus" placeholder=" " style="width: 100%" filterable>
                <el-option label="全部" :value="''"> </el-option>
                <el-option label="已开票" :value="1"> </el-option>
                <el-option label="未开票" :value="0"> </el-option>
              </el-select>
            </el-form-item> -->
                <el-form-item label="商务人员">
                  <el-select v-model="state.query" placeholder="请选择" style="width: 100%" filterable>
                    <el-option v-for="item in state.aduitStatus" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <!-- <el-form-item label="核销状态">
              <el-select v-model="state.query.feeStatus" placeholder="请选择核销状态" style="width: 100%" filterable>
                <el-option v-for="item in state.WriteOffStatus" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item> -->
                <el-form-item label="操作人员">
                  <el-select v-model="state.query" placeholder="请选择" style="width: 100%" filterable>
                    <el-option v-for="item in state.aduitStatus" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="单证人员">
                  <el-select v-model="state.query" placeholder="请选择" style="width: 100%" filterable>
                    <el-option v-for="item in state.aduitStatus" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-collapse-transition>
        <div class="flex-container" style="margin-left: 20px">
          <el-button type="primary" icon="search" @click="getList" size="small">
            搜索
          </el-button>
          <el-button type="info" icon="refresh" @click="reset" size="small">
            重置
          </el-button>
          <el-button type="primary" @click="state.hidden = !state.hidden" size="small" style="padding: 8px 15px">
            <div class="flex-container">
              <el-icon style="transform: rotate(90deg)">
                <MoreFilled />
              </el-icon>
              {{ state.hidden ? "折叠" : "更多条件" }}
            </div>
          </el-button>
        </div>
      </el-form>
    </div>
    <div class="in-container" style="margin-top: 8px">
      <div class="btn-box">
        <el-button type="default" icon="RefreshRight" @click="getList">
        </el-button>
        <!-- <el-button type="primary" @click="batchAduit(1)"> 审核通过 </el-button>
        <el-button type="primary" @click="batchAduit(0)"> 审核取消 </el-button>
        <el-button type="primary" @click="downloadFile"> 导出EXCEL </el-button> -->
        <el-button type="primary" @click="createBill"> 创建账单 </el-button>
        <el-button type="" @click="batchDelete"> 批量删除 </el-button>
        <!-- <el-button type="primary" @click="modifyInvioce">
          改发票
        </el-button> -->
      </div>
      <!-- @update:option="upDataOption" -->
      <AppPageTable stripe :data="state.tableData.data" @change="getList" :height="0" :option="state.tableData.option"
        v-loading="state.tableLoading">
        <el-table-column type="selection" width="40" align="center" fixed="left" />
        <el-table-column prop="doccode" width="70" label="序号" align="center" showOverflowTooltip>
          <template #default="scope">
            <span class="doccode-text" @click="toEditPage(scope.row)">
              {{ scope.row.doccode }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="blNo" width="90" align="center" label="类型" showOverflowTooltip>
        </el-table-column>
        <el-table-column prop="invoiceCode" label="结算单位" align="center" width="100" showOverflowTooltip>
        </el-table-column>
        <el-table-column prop="invoiceCode" label="提单号" align="center" width="100" showOverflowTooltip>
          <template #default="{ row }">
            <span style="color: #5a9cf8; cursor: pointer" @click="toEditPage(row.blNo)">{{ row.blNo }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="balanceDoccode" width="100" label="费用名称" align="center" showOverflowTooltip>
        </el-table-column>
        <!-- <el-table-column label="开票日期" align="center" width="100" showOverflowTooltip>
          <template #default="scope">
            {{
              scope.row.invoiceDate
              ? $utils.formatDateTime(scope.row.invoiceDate, 'YYYY-MM-DD')
              : ''
            }}
          </template>
        </el-table-column>
        <el-table-column label="开航日期" align="center" width="100" showOverflowTooltip>
          <template #default="scope">
            {{
              scope.row.etd
              ? $utils.formatDateTime(scope.row.etd, 'YYYY-MM-DD')
              : ''
            }}
          </template>
        </el-table-column>
        <el-table-column label="装箱日期" align="center" width="100" showOverflowTooltip>
          <template #default="scope">
            {{
              scope.row.packTime
              ? $utils.formatDateTime(scope.row.packTime, 'YYYY-MM-DD')
              : ''
            }}
          </template>
        </el-table-column> -->
        <el-table-column prop="currency" label="币种" align="center" width="100" showOverflowTooltip>
        </el-table-column>
        <el-table-column prop="currency" label="单价" align="center" width="100" showOverflowTooltip>
        </el-table-column>
        <el-table-column prop="currency" label="单位" align="center" width="100" showOverflowTooltip>
        </el-table-column>
        <el-table-column prop="currency" label="数量" align="center" width="100" showOverflowTooltip>
        </el-table-column>
        <el-table-column prop="currency" label="实际金额" align="center" width="100" showOverflowTooltip>
        </el-table-column>
        <el-table-column prop="currency" label="费用状态" align="center" width="100" showOverflowTooltip>
        </el-table-column>
        <el-table-column prop="currency" label="转化汇率" align="center" width="100" showOverflowTooltip>
        </el-table-column>
        <el-table-column prop="currency" label="折本币金额" align="center" width="100" showOverflowTooltip>
        </el-table-column>
        <el-table-column prop="currency" label="账单编号" align="center" width="100" showOverflowTooltip>
        </el-table-column>
        <el-table-column prop="currency" label="发票类型" align="center" width="100" showOverflowTooltip>
        </el-table-column>
        <el-table-column prop="currency" label="税率" align="center" width="100" showOverflowTooltip>
        </el-table-column>
        <el-table-column prop="currency" label="税金" align="center" width="100" showOverflowTooltip>
        </el-table-column>
        <el-table-column prop="currency" label="含税金额" align="center" width="100" showOverflowTooltip>
        </el-table-column>
        <el-table-column prop="currency" label="发票号码" align="center" width="100" showOverflowTooltip>
        </el-table-column>
        <el-table-column prop="currency" label="发票币种" align="center" width="100" showOverflowTooltip>
        </el-table-column>
        <el-table-column prop="currency" label="发票金额" align="center" width="100" showOverflowTooltip>
        </el-table-column>
        <el-table-column prop="verificationMoney" label="已核销金额" align="center" width="100" showOverflowTooltip>
        </el-table-column>
        <el-table-column label="未核销金额" align="center" width="100" showOverflowTooltip>
          <template #default="scope">
            {{ scope.row.totalmoney - scope.row.verificationMoney }}
          </template>
        </el-table-column>
        <el-table-column prop="checkTime" width="110" align="center" label="最新核销日期" showOverflowTooltip>
          <template #default="scope">
            {{
              scope.row.checkTime
              ? $utils.formatDateTime(
                scope.row.checkTime,
                "YYYY-MM-DD HH:mm:ss"
              )
              : ""
            }}
          </template>
        </el-table-column>
        <el-table-column prop="verificationMoney" label="核销结束标记" align="center" width="110" showOverflowTooltip>
        </el-table-column>

        <!-- <el-table-column prop="vessel" align="center" label="船名" showOverflowTooltip width="100">
        </el-table-column>
        <el-table-column prop="voyage" align="center" label="航次" width="100" showOverflowTooltip>
        </el-table-column>
        <el-table-column prop="portDepartureName" align="center" label="起运港" width="100" showOverflowTooltip>
          <template #default="scope">
            {{ scope.row.portDepartureName ? scope.row.portDepartureName : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="portDestinationName" align="center" label="目的港" showOverflowTooltip width="100">
          <template #default="scope">
            {{
              scope.row.portDestinationName ? scope.row.portDestinationName : ''
            }}
          </template>
        </el-table-column>
        <el-table-column prop="entFullname" align="center" label="结算对象名称" width="150" showOverflowTooltip>
        </el-table-column>
        <el-table-column label="收/付" align="center" width="100" showOverflowTooltip>
          <template #default="scope">
            {{ scope.row.isIncome == 1 ? '收款' : '付款' }}
          </template>
        </el-table-column>
        <el-table-column label="费用类型" align="center" width="100">
          <template #default="scope">
            {{ scope.row.feeName }}
          </template>
        </el-table-column>

        <el-table-column prop="totalmoney" label="金额" align="center" width="100" showOverflowTooltip>
        </el-table-column>


        <el-table-column prop="natMoney" width="100" align="center" label="折人民币" showOverflowTooltip>
        </el-table-column>
        <el-table-column label="审核" align="center" width="100" showOverflowTooltip>
          <template #default="scope">
            {{ scope.row.checkStatus == 1 ? '已审' : '未审' }}
          </template>
        </el-table-column>
        <el-table-column prop="checkName" width="100" align="center" label="审核人" showOverflowTooltip>
        </el-table-column>
        <el-table-column prop="checkTime" width="100" align="center" label="审核日期" showOverflowTooltip>
          <template #default="scope">
            {{
              scope.row.checkTime
              ? $utils.formatDateTime(
                scope.row.checkTime,
                'YYYY-MM-DD HH:mm:ss'
              )
              : ''
            }}
          </template>
        </el-table-column>
        <el-table-column prop="feeMemo" align="center" label="备注" showOverflowTooltip>
        </el-table-column> -->
      </AppPageTable>
      <!-- 修改 -->
      <el-dialog v-model="state.show" title="改发票" width="520px" modal-class="modify-invoice-dailog">
        <el-form label-suffix="：" label-width="80px" size="small">
          <el-form-item label="填发票">
            <el-input v-model="state.modfiyForm.invoiceCode" placeholder="请输入" style="width: 100%"></el-input>
          </el-form-item>
          <el-form-item label="填日期">
            <el-date-picker v-model="state.modfiyForm.invoiceDate" type="date" placeholder="请选择" style="width: 100%"
              value-format="YYYY-MM-DD" />
          </el-form-item>
        </el-form>

        <template #footer>
          <div class="button-container">
            <el-button type="default" @click="state.show = false">取消</el-button>
            <el-button type="primary" @click="modifySubmit">确定</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 统计结果 -->
      <div class="statistical-results">
        <el-row>
          <!-- <el-col :span="8">
            <div class="statistical-tip"></div>
            <div class="statistical-label">合计</div>
            <el-row :gutter="12">
              <el-col :span="4">
                <div class="statistical-text" style="color: #000000a6">
                  应收
                </div>
              </el-col>
              <el-col :span="6" v-for="(item, index) in state.resultStatistical.amount._in" :key="index">
                <div class="statistical-text" v-if="state.tableData.data.length">
                  {{ item.currency }}&nbsp;{{ item.money }}
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="4">
                <div class="statistical-text" style="color: #000000a6">
                  -应付
                </div>
              </el-col>
              <el-col :span="6" v-for="(item, index) in state.resultStatistical.amount._out" :key="index">
                <div class="statistical-text" v-if="state.tableData.data.length">
                  {{ item.currency }}&nbsp;{{ item.money }}
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="4">
                <div class="statistical-text" style="color: #000000a6">
                  =利润
                </div>
              </el-col>
              <el-col :span="6" v-for="(item, index) in state.resultStatistical.amount._profit" :key="index">
                <div class="statistical-text" v-if="state.tableData.data.length">
                  {{ item.currency }}&nbsp;{{ item.money }}
                </div>
              </el-col>
            </el-row>
          </el-col> -->
          <!-- <el-col :span="8">
            <div class="statistical-tip"></div>
            <div class="statistical-label">已核对</div>
            <el-row :gutter="12">
              <el-col :span="4">
                <div class="statistical-text" style="color: #000000a6">
                  应收
                </div>
              </el-col>
              <el-col
                :span="6"
                v-for="(item, index) in state.resultStatistical.checked._in"
                :key="index"
              >
                <div class="statistical-text" v-if="state.tableData.data.length">
                  {{ item.currency }}&nbsp;{{ item.money }}
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="4">
                <div class="statistical-text" style="color: #000000a6">
                  -应付
                </div>
              </el-col>
              <el-col
                :span="6"
                v-for="(item, index) in state.resultStatistical.checked._out"
                :key="index"
              >
                <div class="statistical-text" v-if="state.tableData.data.length">
                  {{ item.currency }}&nbsp;{{ item.money }}
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="4">
                <div class="statistical-text" style="color: #000000a6">
                  =利润
                </div>
              </el-col>
              <el-col
                :span="6"
                v-for="(item, index) in state.resultStatistical.checked._profit"
                :key="index"
              >
                <div class="statistical-text" v-if="state.tableData.data.length">
                  {{ item.currency }}&nbsp;{{ item.money }}
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <div class="statistical-tip"></div>
            <div class="statistical-label">选中</div>
            <el-row :gutter="12">
              <el-col :span="4">
                <div class="statistical-text" style="color: #000000a6">
                  应收
                </div>
              </el-col>
              <el-col
                :span="6"
                v-for="(item, index) in state.resultStatistical.selected._in"
                :key="index"
              >
                <div
                  class="statistical-text"
                  v-if="tableData.option.selected.length"
                >
                  {{ item.currency }}&nbsp;{{ item.money }}
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="4">
                <div class="statistical-text" style="color: #000000a6">
                  -应付
                </div>
              </el-col>
              <el-col
                :span="6"
                v-for="(item, index) in state.resultStatistical.selected._out"
                :key="index"
              >
                <div
                  class="statistical-text"
                  v-if="tableData.option.selected.length"
                >
                  {{ item.currency }}&nbsp;{{ item.money }}
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="4">
                <div class="statistical-text" style="color: #000000a6">
                  =利润
                </div>
              </el-col>
              <el-col
                :span="6"
                v-for="(item, index) in state.resultStatistical.selected._profit"
                :key="index"
              >
                <div
                  class="statistical-text"
                  v-if="tableData.option.selected.length"
                >
                  {{ item.currency }}&nbsp;{{ item.money }}
                </div>
              </el-col>
            </el-row>
          </el-col> -->
        </el-row>
        <div class="total-box">
          <div class="total">全部总计：</div>
          <div class="total-item">
            条数<span>{{ 0 }}</span>
          </div>
          <div class="total-item">
            应收（含税）<span>{{ 0 }}</span>
          </div>
          <div class="total-item">
            已核销<span>{{ 0 }}</span>
          </div>
          <div class="total-item">
            未核销<span>{{ 0 }}</span>
          </div>
          <div class="total-item">
            应付（含税）<span>{{ 0 }}</span>
          </div>
          <div class="total-item">
            已核销<span>{{ 0 }}</span>
          </div>
          <div class="total-item">
            未核销<span>{{ 0 }}</span>
          </div>
          <div class="total-item">
            利润<span>{{ 0 }}</span>
          </div>
        </div>
        <div class="total-box">
          <div class="total">选中总计：</div>
          <div class="total-item">
            条数<span>{{ 0 }}</span>
          </div>
          <div class="total-item">
            应收（含税）<span>{{ 0 }}</span>
          </div>
          <div class="total-item">
            已核销<span>{{ 0 }}</span>
          </div>
          <div class="total-item">
            未核销<span>{{ 0 }}</span>
          </div>
          <div class="total-item">
            应付（含税）<span>{{ 0 }}</span>
          </div>
          <div class="total-item">
            已核销<span>{{ 0 }}</span>
          </div>
          <div class="total-item">
            未核销<span>{{ 0 }}</span>
          </div>
          <div class="total-item">
            利润<span>{{ 0 }}</span>
          </div>
        </div>
      </div>
    </div>
    <el-dialog class="dialog" v-model="state.createBillDialog.show" title="创建账单" width="1000" :before-close="handleClose">
      <el-row>
        <el-col :span="2">
          <div style="font-size: 12px; float: right">选择账单：</div>
        </el-col>
        <el-col :span="22">
          <AppPageTable stripe :data="state.dialogTableData.data" @change="getList" size="small" :isPagination="true"
            :height="380" :option="state.dialogTableData.option" v-loading="state.tableLoading">
            <el-table-column type="selection" width="40" align="center" fixed="left" />
            <el-table-column prop="doccode" width="60" label="序号" align="center" showOverflowTooltip>
              <template #default="scope">
                <span class="doccode-text" @click="toEditPage(scope.row)">{{
                  scope.row.doccode
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="blNo" width="70" align="center" label="类型" showOverflowTooltip>
            </el-table-column>
            <el-table-column prop="invoiceCode" label="结算单位" align="center" width="100" showOverflowTooltip>
            </el-table-column>
            <el-table-column prop="balanceDoccode" width="100" label="费用名称" align="center" showOverflowTooltip>
            </el-table-column>
            <el-table-column prop="currency" label="币种" align="center" width="100" showOverflowTooltip>
            </el-table-column>
            <el-table-column prop="currency" label="单价" align="center" width="100" showOverflowTooltip>
            </el-table-column>
            <el-table-column prop="currency" label="单位" align="center" width="100" showOverflowTooltip>
            </el-table-column>
            <el-table-column prop="currency" label="数量" align="center" width="100" showOverflowTooltip>
            </el-table-column>
            <el-table-column prop="currency" label="实际金额" align="center" width="100" showOverflowTooltip>
            </el-table-column>
            <el-table-column prop="currency" label="费用状态" align="center" width="100" showOverflowTooltip>
            </el-table-column>
            <el-table-column prop="currency" label="转化汇率" align="center" width="100" showOverflowTooltip>
            </el-table-column>
            <el-table-column prop="currency" label="折本币金额" align="center" width="100" showOverflowTooltip>
            </el-table-column>
            <el-table-column prop="currency" label="账单编号" align="center" width="100" showOverflowTooltip>
            </el-table-column>
            <el-table-column prop="currency" label="发票类型" align="center" width="100" showOverflowTooltip>
            </el-table-column>
            <el-table-column prop="currency" label="税率" align="center" width="100" showOverflowTooltip>
            </el-table-column>
            <el-table-column prop="currency" label="税金" align="center" width="100" showOverflowTooltip>
            </el-table-column>
            <el-table-column prop="currency" label="含税金额" align="center" width="100" showOverflowTooltip>
            </el-table-column>
            <el-table-column prop="currency" label="发票号码" align="center" width="100" showOverflowTooltip>
            </el-table-column>
            <el-table-column prop="currency" label="发票币种" align="center" width="100" showOverflowTooltip>
            </el-table-column>
            <el-table-column prop="currency" label="发票金额" align="center" width="100" showOverflowTooltip>
            </el-table-column>
            <el-table-column prop="verificationMoney" label="已核销金额" align="center" width="100" showOverflowTooltip>
            </el-table-column>
            <el-table-column label="未核销金额" align="center" width="100" showOverflowTooltip>
              <template #default="scope">
                {{ scope.row.totalmoney - scope.row.verificationMoney }}
              </template>
            </el-table-column>
            <el-table-column prop="checkTime" width="110" align="center" label="最新核销日期" showOverflowTooltip>
              <template #default="scope">
                {{
                  scope.row.checkTime
                  ? $utils.formatDateTime(
                    scope.row.checkTime,
                    "YYYY-MM-DD HH:mm:ss"
                  )
                  : ""
                }}
              </template>
            </el-table-column>
            <el-table-column prop="verificationMoney" label="核销结束标记" align="center" width="110" showOverflowTooltip>
            </el-table-column>
          </AppPageTable>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2"> </el-col>
        <el-col :span="22">
          <div class="total-box">
            <div class="total">总计：</div>
            <div class="total-item">
              条数<span>{{ 0 }}</span>
            </div>
            <div class="total-item">
              应收（含税）<span>{{ 0 }}</span>
            </div>
            <div class="total-item">
              已核销<span>{{ 0 }}</span>
            </div>
            <div class="total-item">
              未核销<span>{{ 0 }}</span>
            </div>
            <div class="total-item">
              应付（含税）<span>{{ 0 }}</span>
            </div>
            <div class="total-item">
              已核销<span>{{ 0 }}</span>
            </div>
            <div class="total-item">
              未核销<span>{{ 0 }}</span>
            </div>
            <div class="total-item">
              利润<span>{{ 0 }}</span>
            </div>
          </div>
        </el-col>
      </el-row>

      <template #footer>
        <div class="dialog-footer">
          <el-button size="large" @click="handleClose">取消</el-button>
          <el-button size="large" type="primary" @click="handleClose">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, computed } from "vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import request from "@/public/request";
import dayjs from "dayjs";
import { MoreFilled } from "@element-plus/icons";
import { fileDownload } from "@/public/publicUtils";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const Router = useRouter();

const state = reactive({
  // 查询条件
  query: {
    doccode: "", //业务编号
    entId: "", //结算对象名称
    invoice: "", //发票号
    blNo: "", //提单号
    saleId: "", //业务员
    feeStatus: 0, //核销状态
    balanceNo: "", //对账单号
    checkStatus: 0, //审核状态
    currency: "", //币种
    // CustDocNo: '', //客户单号
    // FeeCode: '', //费用类型
    // CtnNo: '', //箱封号
    isIncome: "", //收支类型 0 付款 1 收款
    invoiceStatus: 0, //开票状态 0 未开票 1 已开票
    // StartEtd: '', //起始开航日,
    // EndEtd: '', //截止开航日
    // StartPackTime: '', //开始装箱日
    // EndPackTime: '', //结束装箱日
    // StartRecTime: '', //起始接单日
    // EndRecTime: '', //结束接单日
    // StartInvoiceTime: '', //起始开票日
    // EndInvoiceTime: '', //结束开票日
    // StartCheckTime: '', //起始审核日
    // EndCheckTime: '', //结束审核日，
    lock: true, //单票锁定
    outState: false, //退关状态
  },
  //表格数据
  tableData: {
    data: [{ blNo: 321331 }, { blNo: 435451 }],
    option: useTableOption(),
  },
  tableLoading: false,
  // 展开
  hidden: false,
  // 结算对象的数据
  settlementList: [],
  settlementLoading: false,
  // 币种
  current: [],
  // 业务员
  salesman: [],
  salesmanLoading: false,
  // 核销状态
  WriteOffStatus: [
    {
      label: "全部",
      value: "",
    },
    {
      label: "未核销",
      value: 0,
    },
    {
      label: "已核销",
      value: 1,
    },
  ],
  // 审核状态
  aduitStatus: [
    {
      label: "全部",
      value: "",
    },
    {
      label: "未审核",
      value: 0,
    },
    {
      label: "已审核",
      value: 1,
    },
  ],
  //费用类型
  feenameList: [],
  feenameLoading: false,
  // 币种数组
  curList: [],
  currentLoading: false,
  // 统计计算
  resultStatistical: {
    // 合计
    amount: {
      _in: [],
      _out: [],
      _profit: [],
    },
    // 已核对
    checked: {
      _in: [],
      _out: [],
      _profit: [],
    },
    //选中
    selected: {
      _in: [],
      _out: [],
      _profit: [],
    },
  },
  show: false,
  // 发票修改信息
  modfiyForm: {
    ids: [],
    invoiceCode: "",
    invoiceDate: "",
  },
  //创建账单dialog,
  createBillDialog: {
    show: false,
    data: [],
  },
  //dialog表格数据
  dialogTableData: {
    data: [],
    option: useTableOption(),
  },
  //dialog表格显示隐藏
  dialogTableLoading: false,
})

// 开航日
const sailTime = computed({
  get: () => [state.query.StartEtd, state.query.EndEtd],
  set: (val) => {
    if (val) {
      state.query.StartEtd = val[0];
      state.query.EndEtd = val[1];
    } else {
      state.query.StartEtd = "";
      state.query.EndEtd = "";
    }
  },
});

// 装箱日期
const packingTime = computed({
  get: () => [state.query.StartPackTime, state.query.EndPackTime],
  set: (val) => {
    if (val) {
      state.query.StartPackTime = val[0];
      state.query.EndPackTime = val[1];
    } else {
      state.query.StartPackTime = "";
      state.query.EndPackTime = "";
    }
  },
})

// 接单日期
const recDateTime = computed({
  get: () => [state.query.StartRecTime, state.query.EndRecTime],
  set: (val) => {
    if (val) {
      state.query.StartRecTime = val[0];
      state.query.EndRecTime = val[1];
    } else {
      state.query.StartRecTime = "";
      state.query.EndRecTime = "";
    }
  },
})

// 开票日期
const invoiceDateTime = computed({
  get: () => [state.query.StartInvoiceTime, state.query.EndInvoiceTime],
  set: (val) => {
    if (val) {
      state.query.StartInvoiceTime = val[0];
      state.query.EndInvoiceTime = val[1];
    } else {
      state.query.StartInvoiceTime = "";
      state.query.EndInvoiceTime = "";
    }
  },
})

// 审核日期
const checkDateTime = computed({
  get: () => [state.query.StartCheckTime, state.query.EndCheckTime],
  set: (val) => {
    if (val) {
      state.query.StartCheckTime = val[0];
      state.query.EndCheckTime = val[1];
    } else {
      state.query.StartCheckTime = "";
      state.query.EndCheckTime = "";
    }
  },
})

// 获取币种类型
const getCurrentData = async (val) => {
  console.log(1111111111111111);
  state.currentLoading = true;
  let res = await request.get("/api/base/currency/dropdownlist", {
    keywords: val,
  });
  state.current = res.map((item) => {
    return {
      label: item.currencyCode + "|" + item.currencyName,
      value: item.currencyCode,
    };
  });
  console.log(state.current);
  state.currentLoading = false;
}

// 获取列表数据
const getList = async () => {
  // let search = {
  //   PageIndex: state.tableData.option.page,
  //   PageSize: state.tableData.option.pageSize,
  //   ...state.query
  // }
  // state.tableLoading = true
  // let res = await request.post('/api/docworkfee/getWorkFee', search)
  // state.curList = []
  // res.content.forEach((item) => {
  //   if (item.portDeparture) {
  //     item.portDepartureName = item.portDeparture?.portName
  //   } else {
  //     item.portDepartureName = ''
  //   }
  //   if (item.portDestination) {
  //     item.portDestinationName = item.portDestination?.portName
  //   } else {
  //     item.portDestinationName = ''
  //   }
  //   if (state.curList.indexOf(item.currency) === -1) {
  //     state.curList.push(item.currency)
  //   }
  //   if (item.invoice) {
  //     item.invoiceCode = item.invoice?.invoiceCode
  //     item.invoiceDate = item.invoice?.invoiceDate
  //   } else {
  //     item.invoiceCode = ''
  //     item.invoiceDate = ''
  //   }
  // })
  // statisticCurResult(res.content)
  // state.tableData.data = res.content
  // state.tableData.option.total = res.totalElements
  // state.tableLoading = false
}

// 统计个币种的计算结果
const statisticCurResult = (list) => {
  state.resultStatistical.amount = {
    _in: [],
    _out: [],
    _profit: [],
  };
  for (const iterator of state.curList) {
    let curObj = {
      currency: iterator,
      money: 0,
    };
    state.resultStatistical.amount._in.push(
      JSON.parse(JSON.stringify(curObj))
    );
    state.resultStatistical.amount._out.push(
      JSON.parse(JSON.stringify(curObj))
    );
    state.resultStatistical.amount._profit.push(
      JSON.parse(JSON.stringify(curObj))
    );
  }
  for (const sigleValue of list) {
    if (state.curList.indexOf(sigleValue.currency) != -1) {
      if (sigleValue.isIncome == 1) {
        addCurCount(
          sigleValue.getTotalmoney,
          sigleValue.currency,
          state.resultStatistical.amount._in
        );
      } else if (sigleValue.isIncome == 0) {
        addCurCount(
          sigleValue.getTotalmoney,
          sigleValue.currency,
          state.resultStatistical.amount._out
        );
      }
    }
  }
  // 计算各币种对应的利润
  for (const iterator of state.resultStatistical.amount._profit) {
    let index = state.curList.indexOf(iterator.currency);
    let _in = state.resultStatistical.amount._in;
    let _out = state.resultStatistical.amount._out;
    let _profit = state.resultStatistical.amount._profit;
    _profit[index].money = _in[index].money - _out[index].money;
  }
}

// 复选框变动
//const upDataOption = (inOption) => {
//   let selected = state.tableData.option.selected;
//   state.resultStatistical.selected = {
//     _in: [],
//     _out: [],
//     _profit: [],
//   };
//   for (const iterator of state.curList) {
//     let curObj = {
//       currency: iterator,
//       money: 0,
//     };
//     state.resultStatistical.selected._in.push(
//       JSON.parse(JSON.stringify(curObj))
//     );
//     state.resultStatistical.selected._out.push(
//       JSON.parse(JSON.stringify(curObj))
//     );
//     state.resultStatistical.selected._profit.push(
//       JSON.parse(JSON.stringify(curObj))
//     );
//   }
//   for (const item of selected) {
//     if (state.curList.indexOf(item.currency) != -1) {
//       if (item.isIncome == 1) {
//         addCurCount(
//           item.getTotalmoney,
//           item.currency,
//           state.resultStatistical.selected._in
//         );
//       } else if (item.isIncome == 0) {
//         addCurCount(
//           item.getTotalmoney,
//           item.currency,
//           state.resultStatistical.selected._out
//         );
//       }
//     }
//   }
//   // 计算各币种对应的利润
//   for (const iterator of state.resultStatistical.selected._profit) {
//     let index = state.curList.indexOf(iterator.currency);
//     let _in = state.resultStatistical.selected._in;
//     let _out = state.resultStatistical.selected._out;
//     let _profit = state.resultStatistical.selected._profit;
//     _profit[index].money = _in[index].money - _out[index].money;
//   }
// },

const addCurCount = (curMoney, cur, list) => {
  for (const iterator of list) {
    if (iterator.currency == cur) {
      iterator.money += curMoney;
    }
  }
}

// 重置
const reset = () => {
  state.query = {
    doccode: "", //业务编号
    entId: "", //结算对象名称
    invoice: "", //发票号
    blNo: "", //提单号
    saleId: "", //业务员
    feeStatus: 0, //核销状态
    balanceNo: "", //对账单号
    checkStatus: 0, //审核状态
    currency: "", //币种
    isIncome: "", //收支类型 0 付款 1 收款
    invoiceStatus: 0, //开票状态 0 未开票 1 已开票
  };
  getList();
}

// 批量审核和取消==
const batchAduit = async (val) => {
  if (!state.tableData.option.selected.length) {
    ElMessage.warning("请选择数据");
    return;
  }
  let req = {
    ids: [],
    checkStatus: val,
  };
  let isNull = false;
  if (val) {
    // 审核通过判断是费用类型和币种不能为空
    for (const iterator of state.tableData.option.selected) {
      if (
        !iterator.feeName ||
        !iterator.currency ||
        !iterator.entFullname
      ) {
        isNull = true;
        break;
      }
      if (iterator.checkStatus === 1) {
        ElMessage.warning("当前选中的数据已审核");
        return;
      }
      req.ids.push(iterator.id);
    }
    if (val == 1 && isNull) {
      ElMessage.warning("该数据费用类型或币种或结算对象名称为空");
      return;
    }
    let res = await request.post("/api/docworkfee/checkTable", req);
    if (res.status) {
      getList();
      ElMessage.success("成功");
    } else {
      ElMessage.warning(res.message);
    }
  } else {
    for (const iterator of state.tableData.option.selected) {
      if (
        !iterator.feeName ||
        !iterator.currency ||
        !iterator.entFullname
      ) {
        isNull = true;
        break;
      }
      if (iterator.checkStatus === 0) {
        ElMessage.warning("当前选中的数据未审核");
        return;
      }
      req.ids.push(iterator.id);
    }
    if (val == 0 && isNull) {
      ElMessage.warning("该数据费用类型或币种或结算对象名称为空");
      return;
    }
    let res = await request.post("/api/docworkfee/uncheckTable", req);
    if (res.status) {
      getList();
      ElMessage.success("成功");
    } else {
      ElMessage.warning(res.message);
    }
  }
}

// 修改发票
const modifyInvioce = async () => {
  if (!state.tableData.option.selected.length) {
    ElMessage.warning("请选择数据");
    return;
  }
  state.modfiyForm = {
    ids: [],
    invoiceCode: "",
    invoiceDate: "",
  };
  for (const iterator of state.tableData.option.selected) {
    state.modfiyForm.ids.push(iterator.id);
  }
  state.show = true;
}

const modifySubmit = async () => {
  if (!state.modfiyForm.invoiceCode || !state.modfiyForm.invoiceDate) {
    ElMessage.warning("请填写发票号和日期");
    return;
  }
  let res = await request.post(
    "/api/docworkfee/changeInvoice",
    state.modfiyForm
  );
  if (res.status) {
    getList();
    ElMessage.success("成功");
    state.show = false;
  } else {
    ElMessage.warning(res.message);
  }
}

// 跳转业务详情页面
const toEditPage = async (id) => {
  Router.openTab({
    path: "/finance/feeDetail",
    query: {
      id: id,
      // title: `业务详情${row.doccode}`,
      // iscopy: false,
      // tab: '费用信息'
    },
  });
}

// 导出excel
const downloadFile = async () => {
  fileDownload("/api/docworkfee/download", state.query, "费用审核")
    .then(() => { })
    .catch((err) => {
      ElMessage.warning("文件导出失败");
    });
}

// 获取结算对象的数据
const getBusDetail = async (val) => {
  state.settlementLoading = true;
  let res = await request.get("/api/buenterprise/dropdownlist", {
    KeyWords: val,
  });
  res.forEach((item) => {
    item.label = item.entCode;
    item.value = item.id;
  });
  state.settlementList = res;
  state.settlementLoading = false;
}

// 获取业务员
const getSalesman = async (val) => {
  state.salesmanLoading = true;
  let res = await request.get("/api/user/userList", {
    keyword: val,
  });
  res.forEach((item) => {
    item.label = item.nickName;
    item.value = item.id;
  });
  state.salesman = res;
  state.salesmanLoading = false;
}

// 获取费用类型
const getFeeType = async (val) => {
  state.feenameLoading = true;
  let res = await request.get("/api/base/feetype/query", {
    KeyWords: val,
  });
  res.content.forEach((item) => {
    item.label = item.feeName;
    item.value = item.feeName;
  });
  state.feenameList = res.content;
  state.feenameLoading = false;
}
//创建表单
const createBill = () => {
  state.createBillDialog.show = true;
}
//批量删除
const batchDelete = () => {
  console.log(state.tableData.option.selected);
}

//创建账单dialog关闭
const handleClose = () => {
  console.log("关闭");
  state.createBillDialog.show = false;
}
</script>

<style lang="scss" scoped>
.form-container {
  border: 1px solid #e8e8e8;
  padding: 6px 6px 6px 8px;
  background-color: #ffffff;

  :deep(.el-form-item--small .el-form-item__label) {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.85);
  }

  :deep(.el-input--suffix .el-input__inner) {
    padding-right: 4px;
  }

  :deep(.el-form--inline .el-form-item) {
    display: flex;
    margin-right: 0;
  }

  :deep(.el-form-item--small.el-form-item) {
    margin-bottom: 8px;
  }
}

.in-container {
  height: auto;
}

.btn-box {
  margin-bottom: 8px;
}

.flex-container {
  display: flex;
}

.statistical-results {
  // padding-left: 20px;
  // padding-right: 20px;

  .statistical-tip {
    display: inline-block;
    background: #2867c9;
    width: 4px;
    height: 20px;
    vertical-align: middle;
    margin-left: -20px;
  }

  .statistical-label {
    margin: 0 16px;
    display: inline-block;
    font-weight: 600;
    color: #000000a6;
  }

  .statistical-text {
    color: red;
    font-size: 12px;
    line-height: 18px;
  }

  .total-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 30px;
    background: #f3f3f3;
    margin-top: 10px;
    padding: 3px 6px;
    font-size: 12px;

    .total-item {
      margin-right: 20px;
    }

    .total-item span {
      margin-left: 6px;
      color: #5a9cf8;
    }
  }
}

.doccode-text {
  color: rgb(24, 144, 255);
  cursor: pointer;
}

.button-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

:deep(.el-checkbox.el-checkbox--large) {
  height: 0px;
}

:deep(.el-dialog__footer) {
  padding-bottom: 10px;
  text-align: center;
}

:deep(.el-table__cell) {
  height: auto;
}

.dialog {
  .total-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 30px;
    background: #f3f3f3;
    margin-top: 10px;
    padding: 3px 10px;
    font-size: 12px;

    .total-item {
      margin-right: 20px;
    }

    .total-item span {
      margin-left: 6px;
      color: #5a9cf8;
    }
  }
}

:deep(.el-dialog) {
  padding: 0 0;
}

:deep(.el-dialog__header) {
  border-bottom: 1px solid #e8e8e8;
  padding: 7px 12px;
  font-family: 800;
}

:deep(.el-dialog__footer) {
  border-top: 1px solid #e8e8e8;
  padding: 8px 0;
}
</style>

<style lang="scss">
.modify-invoice-dailog {
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
  }

  :deep(.el-dialog__footer) {
    border-top: 1px solid #e8e8e8;
  }
}
</style>
